<!-- ! -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个Vue项目案例</title>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
        <h1>{{name}}</h1>
        <h3>用户名:{{user.name}}</h3>
        <h3>性别:{{user.sex=='女'}}</h3>
        <h3>判断:{{1==='1'}}</h3>
        <h3>角色:{{user.type=='1'?'管理员':'游客'}}</h3>
    </div>
</body>
</html>
<script src="./js/2.7.14_dist_vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",//element用来Vue实列定义一个作用范围
        data :{
            //用来给Vue实列定义一些相关数据
            message:"Hello Vue!",
            name:"张三",
            user:{
                name:"李四",
                sex:"男",
                type:1,  //1.管理员  不是1都是游客
            }
        },
    });
</script>